// 虚拟dom
const vDom = {
  tag: "div",
  attrs: {
    className: "app",
    title: "张三",
  },
  children: [{
    tag: 'h1',
    attrs: {
      className: 'title'
    },
    children: ["哈哈哈"]
  }, {
    tag: 'ul',
    children: [{
      tag: 'li',
      children: ["张三"],
      events: {
        click: function () {
          alert('张三')
        }
      }
    },{
      tag: 'li',
      children: ["李四"]
    },{
      tag: 'li',
      children: ["王武"]
    },{
      tag: 'li',
      children: ["赵六"]
    }]
  }],
};

function render(vDom) {
  if(typeof vDom === 'string') return document.createTextNode(vDom)
  // 创建节点
  const node = document.createElement(vDom.tag);
  if (vDom.attrs) {
    // 获取对象键值对
    Object.entries(vDom.attrs).forEach(([key, value]) => {
            // 添加dom属性
            // 把标签上对应的属性添加进去
      if (key === "className") {
        node.setAttribute("class", value);
      } else {
        node.setAttribute(key, value);
      }
    });
  }
  // 绑定事件
  if(vDom.events) {
    Object.entries(vDom.events).forEach(([type, callback]) => {
      node.addEventListener(type, callback)
    })
  }
  if(vDom.children) {
    vDom.children.forEach(v => {
      node.appendChild(render(v))
    })
  }

  return node;
}

const root = document.querySelector('#root')
const dom = render(vDom);
root.appendChild(dom)
